<template>
  <div class="car-rental">
    <!--轮播图-->
    <el-carousel height="200px">
      <el-carousel-item>
        <img src="https://dimg04.c-ctrip.com/images/0zg6g12000b8c97y07816.jpg" alt="Carousel Image 1"/>
      </el-carousel-item>
      <el-carousel-item>
        <img src="@/assets/icons/想走就走.png" alt="Carousel Image 3"/>
      </el-carousel-item>
      <el-carousel-item>
        <img src="@/assets/icons/520.png" alt="Carousel Image 3"/>
      </el-carousel-item>
    </el-carousel>
    <el-form ref="searchForm" :model="searchForm" label-width="80px" class="search-form">
      <el-row>
        <el-col :span="12">
          <el-form-item label="取车城市">
            <el-autocomplete
                v-model="searchForm.pickupCity"
                :fetch-suggestions="fetchCities"
                placeholder="请输入或选择城市"
                :popper-append-to-body="false"
                @select="updateLocations"
            ></el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="取车地点" class="pickup-location">
            <el-input v-model="searchForm.pickupLocation"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item v-if="showReturnCity" label="还车城市">
            <el-autocomplete
                v-model="searchForm.returnCity"
                :fetch-suggestions="fetchCities"
                placeholder="请输入或选择城市"
                :popper-append-to-body="false"
                @select="updateLocations"
            ></el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="showReturnCity" label="还车地点" class="pickup-location">
            <el-input v-model="searchForm.returnLocation"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="租车日期">
            <el-date-picker
                v-model="searchForm.rentalDateRange"
                type="daterange"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="datePickerOptions"
                @change="calculateDays"
            ></el-date-picker>
            <span v-if="searchForm.rentalDateRange && searchForm.rentalDateRange[0]">
    共{{ rentalDays }}天
    </span>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="button-column">
          <el-form-item>
            <el-button type="text" :icon="showReturnCity ? 'el-icon-close' : 'el-icon-plus'" @click="toggleReturnCity">
              {{ showReturnCity ? '关闭异地还车' : '异地还车' }}
            </el-button>
            <el-button type="primary" @click="searchCars">立即租车</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <div>
          <el-button id="code-dropdown-btn" class="dropdown-btn" @click="toggleCodeVisibility">
            <i :class="showCode ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i> {{
              showCode ? '关闭筛选车辆' : '打开筛选车辆'
            }}
          </el-button>
          <div v-show="showCode">
            <ul>
              <li class="tags-line tags-line-border">
                <div class="tags-title">座位数量 :&nbsp;
                  <span v-for="position in positionList"
                        :key="position.id" @click="queryArea($event,position.id)">
                      <el-button size="small" round>{{ position.seats }}</el-button>
                    </span>
                </div>
                <div class="tags-title">汽车品牌 :&nbsp;
                  <span v-for="position in carBrandList"
                        :key="position.id" @click="querycarBrand($event,position.id)">
                      <el-button size="small" round>{{ position.carBrand }}</el-button>
                    </span>
                </div>
                <div class="tags-title">租车公司 :&nbsp;
                  <span v-for="position in carCompanyList"
                        :key="position.id" @click="querycarCompany($event,position.id)">
                      <el-button size="small" round>{{ position.carCompanyId }}</el-button>
                    </span>
                </div>
                <div class="tags-title">车辆排挡 :&nbsp;
                  <span v-for="position in drivingStyleList"
                        :key="position.id" @click="querydrivingStyle($event,position.id)">
                      <el-button size="small" round>{{ position.drivingStyle }}</el-button>
                    </span>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <el-col :span="16">
          <el-table :data="carList" style="width: 100%" stripe>
            <el-table-column prop="carid" width="10" :hidden="true">
            </el-table-column>
            <el-table-column label="汽车图片" align="center" prop="images" width="150">
              <template slot-scope="scope">
                <el-image
                    style="width: 100px; height: 100px"
                    :src="dialogImageUrl + scope.row.images[0]"
                >
                </el-image>
              </template>
            </el-table-column>
            <el-table-column prop="carName" label="汽车名称" width="150">
            </el-table-column>
            <el-table-column prop="photograph" label="牌照" width="100">
            </el-table-column>
            <el-table-column prop="seats" label="座位数" width="80">
            </el-table-column>
            <el-table-column prop="doors" label="车门数" width="80">
            </el-table-column>
            <el-table-column prop="engineCapacity" label="排量" width="80">
            </el-table-column>
            <el-table-column prop="price" label="价格" width="80">
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button type="primary" @click="openModal(scope.row)">去租车</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="8">
          <el-carousel height="700px">
            <el-carousel-item>
              <img src="@/assets/icons/无锡口碑.png" alt="Carousel Image 1"/>
            </el-carousel-item>
            <el-carousel-item>
              <img src="@/assets/icons/武汉口碑.png" alt="Carousel Image 3"/>
            </el-carousel-item>
            <el-carousel-item>
              <img src="@/assets/icons/青岛口碑.png" alt="Carousel Image 3"/>
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-form>
    <el-divider></el-divider>
    <!-- 省略其他代码 -->
    <div class="hotel-recommendation">
      <h3>当地酒店推荐</h3>
      <ul>
        <li>酒店1</li>
        <li>酒店2</li>
        <li>酒店3</li>
      </ul>
    </div>
    <!-- 租车公司列表模态框 -->
    <el-dialog title="租车公司列表" :visible.sync="visible" :before-close="handleModalClose">
      <el-row :gutter="20">
        <el-col :span="8" v-for="company in companyList" :key="company.id">
          <el-card :body-style="{ padding: '14px' }">
            <h3>{{ company.name }}</h3>
            <div>公司地址: {{ company.address }}</div>
            <div>联系电话: 400-820-8820</div>
            <div>营业时间: {{ company.businessTime }}</div>
            <div style="margin-top: 14px;">
              <el-button type="primary" @click="selectCompany(company)">选择租车公司</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

let gateway = 'http://www.localhost:8232/rentcar/rentcar';
export default {
  data() {
    return {
      price:0, //当前车辆价格
      carid: 0,//当前车辆id
      carBrand: '',
      carCompany: '',
      drivingStyle: '',
      drivingStyleList: [
        {"id": "自动档", "drivingStyle": "自动档"},
        {"id": "手动档", "drivingStyle": "手动档"}
      ],
      carCompanyList: [
        {"id": "1", "carCompanyId": "安心租"},
        {"id": "2", "carCompanyId": "语香租车"},
        {"id": "3", "carCompanyId": "汇铭租车"},
        {"id": "4", "carCompanyId": "一嗨租车"},
        {"id": "5", "carCompanyId": "安致租车"},
        {"id": "6", "carCompanyId": "梦莹租车"},
        {"id": "7", "carCompanyId": "文月租车"}
      ],
      carBrandList: [
        {"id": "比亚迪", "carBrand": "比亚迪"},
        {"id": "英菲蒂尼", "carBrand": "英菲蒂尼"},
        {"id": "新能源", "carBrand": "新能源"},
        {"id": "欧拉", "carBrand": "欧拉"},
        {"id": "蔚来", "carBrand": "蔚来"},
        {"id": "特斯拉", "carBrand": "特斯拉"},
        {"id": "合众汽车", "carBrand": "合众汽车"},
        {"id": "斯巴鲁", "carBrand": "斯巴鲁"}
      ],
      showCode: false, //显示属性
      selectedCityId: 0,//被选中的地区id
      positionList: [
        {
          "id": 2,
          "seats": "2座"
        },
        {
          "id": 4,
          "seats": "4座"
        },
        {
          "id": 5,
          "seats": "5座"
        },
        {
          "id": 6,
          "seats": "6座"
        },
        {
          "id": 7,
          "seats": "7座"
        }
      ],
      visible: false, // 模态框显示状态
      companyList: [
        {id: 1, name: '租车公司1', address: '地址1', businessTime: '时间1'},
        {id: 2, name: '租车公司2', address: '地址2', businessTime: '时间2'},
        {id: 3, name: '租车公司3', address: '地址3', businessTime: '时间3'},
      ],
      selectedCompany: null, // 用户选择的租车公司
      images: [],
      //回显图片的前面连接
      dialogImageUrl: 'http://rufnvmzv0.bkt.clouddn.com/',
      cities: ['北京', '上海', '广州', '深圳'], // 城市列表
      showReturnCity: false, // 是否显示还车城市和还车地点
      searchForm: {
        pickupCity: '',
        returnCity: '',
        pickupLocation: '',
        returnLocation: '',
        rentalDateRange: null
      },
      carList: [],
      selectedCar: null,
      orderForm: {
        name: '',
        phone: '',
        pickupTime: '',
        returnTime: '',
      },
      rentalDays: 0,
      datePickerOptions: {
        disabledDate: time => {
          const currentDate = new Date();
          currentDate.setHours(0, 0, 0, 0); // 设置当前日期的时间为 0:00:00
          return time.getTime() < currentDate.getTime();
        },
      },
    };
  },
  methods: {
    //开关下拉筛选
    toggleCodeVisibility() {
      this.showCode = !this.showCode;
    },
    //将座位id设置
    queryArea(event, id) {
      if (this.selectedCityId == null || this.selectedCityId !== id) {
        this.selectedCityId = id;
      } else {
        this.selectedCityId = null;
      }
      //调用多条件查询方法
      this.searchCars();
    },
    //将选择的汽车品牌设置
    querycarBrand(event, id) {
      if (this.carBrand == '' || this.carBrand !== id) {
        this.carBrand = id;
      } else {
        this.carBrand = '';
      }
      //调用多条件查询方法
      this.searchCars();
    },
    //将选择的汽车公司设置
    querycarCompany(event, id) {
      if (this.carCompany == null || this.carCompany !== id) {
        this.carCompany = id;
      } else {
        this.carCompany = null;
      }
      //调用多条件查询方法
      this.searchCars();
    },
    //将选择的汽车排挡设置
    querydrivingStyle(event, id) {
      if (this.drivingStyle == null || this.drivingStyle !== id) {
        this.drivingStyle = id;
      } else {
        this.drivingStyle = null;
      }
      //调用多条件查询方法
      this.searchCars();
    },
    openModal(row) {
      console.log(row);
      if (this.rentalDays === null || this.rentalDays === 0) {
        alert("请选择租车时间")
        return;
      }
      this.visible = true; // 打开模态框
      this.carid = row.carid; //将当前的汽车id赋值给定义的属性
      this.price = row.price; //将当前车辆的价格赋值给定义属性
      //发送查询租车公司方法
      axios({
        url: gateway + '/carPackage/AToCarSearchCompany',
        method: 'get',
        params: {
          carId: row.carid
        }
      }).then(response => {
        console.log(response);
        //将查询的租车公司 赋值给companyList 公司列表
        this.companyList = response.data;
      })
    },
    handleModalClose(done) {
      this.selectedCompany = null; // 重置选择的租车公司
      done(); // 关闭模态框
    },
    //选择租车公司按钮
    selectCompany(company) {
      this.selectedCompany = company; // 保存用户选择的租车公司

      // console.log(this.selectedCompany);
      // console.log(this.searchForm)
      // console.log(this.rentalDays)
      // console.log(this.carid)
      // 处理其他逻辑
      this.visible = false; // 关闭模态框
      //跳转页面  同时将这个页面的 时间和天数 以及 租车地点存进sions中  下一个页面好取出来
      //存数据
      this.$router.push({
        name: 'RentalCarsDetail',
        params: {
          carCompanyId: company.id,
          carId: this.carid, //汽车id
          rentalDays: this.rentalDays, //选择的租车天数
          searchForm: this.searchForm, //这里是地点等参数
          Totalprice: this.price //这里传递的是价格单价
        }  // 如果你的路由需要参数，可以在这里传递
      });
    },
    //查询所有的汽车套餐
    Carpackage() {
      axios({
        url: gateway + '/carPackage/GetlistcarPackage',
        method: 'get'
      }).then(response => {
        console.log(response)
        this.carList = response.data;
        //将图片赋值上面定义的list
        this.images.push(response.data.images)
      })
    },
    updateLocations() {
      if (this.searchForm.pickupCity) {
        this.searchForm.pickupLocation = '默认取车地点'; // 根据取车城市更新取车地点
      } else {
        this.searchForm.pickupLocation = '';
      }
      if (this.showReturnCity && this.searchForm.returnCity) {
        this.searchForm.returnLocation = '默认还车地点'; // 根据还车城市更新还车地点
      } else {
        this.searchForm.returnLocation = '';
      }
    },
    toggleReturnCity() {
      this.showReturnCity = !this.showReturnCity; // 切换显示还车城市和还车地点
    },
    searchCars() {
      //判断有没有选择时间以及 租车地点 没有的话就弹框提醒
      if (this.searchForm.pickupCity == null || this.searchForm.pickupCity === '') {
        alert("请选择租车城市")
        return;
      } else if (this.rentalDays <= 0) {
        alert("请选择租车时间");
        return;
      }
      //根据取车城市 查询出有哪些汽车在输入的城市  然后将数据返回给carList
      // 根据搜索条件从后端接口获取车辆列表
      axios({
        url: gateway + '/carPackage/MultiConditionScreening',
        method: 'post',
        data: {
          seats: this.selectedCityId,
          carBrand: this.carBrand,
          carCompanyId: this.carCompany,
          drivingStyle: this.drivingStyle
        }
      }).then(response => {
        console.log(response);
        this.carList = response.data;
        //差一个将图片放上来
        this.images.push(response.data.images)
        //清空筛选条件
      })
      // ...
      // 将数据保存到 carList 中
      // this.carList = [];
    },
    calculateDays() {
      const range = this.searchForm.rentalDateRange;
      if (range && range[0] && range[1]) {
        const startDate = new Date(range[0]);
        const endDate = new Date(range[1]);
        const days = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24));
        this.rentalDays = days;
      } else {
        this.rentalDays = 0;
      }
      console.log(range[0])
      console.log(range[1])
    },
    fetchCities(queryString, callback) {
      // 模拟异步获取城市列表
      const results = this.cities.filter(city =>
          city.toLowerCase().includes(queryString.toLowerCase())
      );
      // 返回结果
      callback(results);
    },
    // 其他方法

  },
  // 页面一加载调用
  created() {
    //加载汽车套餐数据
    this.Carpackage();
  },
};
</script>

<style scoped>
.pickup-location {
  margin-top: -5px;
}

.button-column {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.hotel-recommendation {
  margin-top: 20px;
}

.hotel-recommendation h3 {
  margin-bottom: 10px;
}

.hotel-recommendation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hotel-recommendation li {
  margin-bottom: 5px;
}

.dropdown-btn {
  background-color: #f9f9f9;
  color: #333;
  padding: 10px;
  border: none;
  cursor: pointer;
  outline: none;
}
</style>
